<template>
	<view :class="['container',videoList.length == 0 ? '' :'videoBox']">
		<view class="video_item" v-for="item in videoList" :key="item.id" @click="handleVideo(item)">
			<view class="player">
				<image class="jkbg" src="../../pagesC/static/img/jkbj.png" />
				<view class="playBg">
					<image class="play" src="../../pagesC/static/img/play.png" mode=""></image>
				</view>
			</view>
			<view class="title">
				<view class="name">{{item.projectName}}</view>
				<span class="state" :style="{backgroundColor: item.channelStatus == 1 ? '#00C777' : '#B4B9C2'}"></span>
			</view>
		</view>

		<u-empty
			v-if="videoList.length == 0"
			text="暂无数据"
			:icon="emptyIcon"
			style="width: 100%;"
      	></u-empty>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import emptyIcon from "@/pagesC/static/images/ndata.png"
import { surveillanceVideo } from '@/api/qss/project.js'
	
const projectCode = ref('')
const videoList = ref([])

// 获取视频列表
function getVideo(){
	uni.showLoading({
		title: '加载中...'
	})
	surveillanceVideo({projectCode: projectCode.value}).then(res=>{
		console.log(res)
		videoList.value = res.rows
	}).finally(()=>{
		uni.hideLoading()
	})
}

const player = ref(null)
function handleVideo(item){
	//加密url
	const videoSrc = encodeURIComponent(item.url2)
	const channelName = item.channelName
	uni.navigateTo({
	  url:`/pagesC/project/videoDetail?url=${videoSrc}&name=${channelName}`,
	});
}
onLoad((option) => {
	if(uni.getStorageSync('activeProject')){
	    const activeProject = uni.getStorageSync('activeProject')
		projectCode.value = activeProject.code
		// projectCode.value = '5001072407150001'
		getVideo()
	}
})
</script>

<style lang="scss" >
	page {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}
	.videoBox{
		padding: 40rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 40rpx;
		.video_item{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			.player{
				width: 100%;
				height: 210rpx;
				display:flex;
				justify-content: center;
				align-self: center;
				position: relative;
				.jkbg{
					width:240rpx;
					height:45rpx;
					margin-top:calc(105rpx - 20rpx)
				}
				.playBg{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					background-color: rgba(0, 0, 0, 0.4);
					text-align: center;
					.play{
						width: 64rpx;
						height: 64rpx;
						margin-top: 75rpx;
					}
				}
			}
			.title{
				height: 65rpx;
				font-size: 24rpx;
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					width: 85%;
					line-height: 65rpx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.state{
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
				}

			}
		}
	}
</style>